<template>
	<view>
		<u-popup :show="NumberPeoplePopuShow" @close="close" mode="center">
			<view class="select-v animate__animated animate__bounceIn">
				<view class="title">
					{{$t("popu.NumberOfDiners")}}
				</view>
				<!-- 人数 -->
				<view class="FunctionPoint_c">
					<view class="FunctionPoint_Item" :class="currentIndex == index? 'FunctionPoint_Item_y':''"
						v-for="(item , index) in 10" :key="index" @click="itemFun(index)">
						{{index +1}}
					</view>
				</view>
				<!-- 输入 -->
				<view class="numberINdex">
					<input class="numberINdex_inpt" v-model="inpNum" type="number" placeholder="手动输入人数" />
					<view class="">
						<u-icon name="arrow-right" color="#fff"></u-icon>
					</view>
				</view>
				<!-- 分割 -->
				<view class="" style="margin-top: ;">
					<u-divider text=""></u-divider>
				</view>

				<button class="btn-primary but-c" @click="skipFun">
					{{$t("popu.determine")}}
				</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		chosePersonNum
	} from '@/common/config/api.js'
	export default {
		name: "NumberPeoplePopu",
		data() {
			return {
				currentIndex: 0,
				NumberPeoplePopuShow: false,
				inpNum: ''
			};
		},
		mounted() {
			// 打开弹框
			this.bus.$on("NumberPeoplePopuShowFun", (v, i) => {
				this.NumberPeoplePopuShow = true

			});
		},
		created() {
			if (this.getDinersNumber()) {
				if (this.getDinersNumber() <= 10) {
					this.currentIndex = this.getDinersNumber() - 1
				} else {
					this.currentIndex = this.getDinersNumber()
				}
			}
		},
		computed: {
			dinersNumber() {
				if (this.currentIndex < 10) {
					return this.currentIndex + 1
				} else {
					return this.currentIndex
				}
			},
			inpNums() {
				return this.inpNum != '' ? this.inpNum : this.dinersNumber
			}
		},
		methods: {
			itemFun(e) {
				this.currentIndex = e
			},
			skipFun() {
				chosePersonNum({
					id: this.getDeskId(),
					personNum: this.inpNums
				}).then((res) => {
					this.NumberPeoplePopuShow = false
					uni.setStorageSync('dinersNumber', this.inpNums)
					this.bus.$emit('NumberPeoplePopuRenew', this.inpNums) //更新用餐人数
				}).catch(() => {

				})

			},
			close() {
				this.NumberPeoplePopuShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.select-v {
		width: 430px;
		height: 447px;
		background: #161618;
		border-radius: 10px 10px 10px 10px;
		// opacity: 0.8;
		background: rgba(1, 22, 22, 0.7);
		padding: 24px 20px;
		display: flex;
		// justify-content: center;
		flex-direction: column;

		.title {
			// width: 100%;
			font-size: 20px;
			opacity: 1;
			margin: 0 auto;
			color: $uni-text-color;
		}

	}

	.FunctionPoint_c {
		// margin-top: 24upx;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.FunctionPoint_Item {
		width: 15%;
		height: 70px;
		/* padding: 32upx 0; */
		/* height: 152upx; */
		margin: 0 10px;
		margin-top: 24px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: $uni-text-color;
		background-color: rgba(44, 44, 47, 0.8);
		border-radius: 10px;
		font-size: 24px;
		/* padding: 25upx 0; */
	}

	.FunctionPoint_Item_y {
		background-color: $uni-text-color-zbt-f;
	}

	.numberINdex {
		margin-top: 24px;
		background-color: rgba(44, 44, 47, 0.8);
		color: $uni-text-color;
		font-size: 24px;
		padding: 16px;
		border-radius: 10px;
		display: flex;
		flex-direction: row;
		align-items: center;

		.numberINdex_inpt {
			flex: 1;
		}
	}

	.but-c {
		width: 172px;
		height: 50px;
		margin: 0 auto;
		margin-top: 24px;
	}
</style>